<template>
  <div id="SoundEqTran">
    <div class="SoundEq1">
      <div class="SoundEq1Title">远程控制</div>
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <!-- 设备 -->
        <span slot="equipId" slot-scope="text, record">
          <a-select
            v-model="record.equipId"
            @change="getPotList"
            style="width: 120px"
            placeholder="请选择设备"
          >
            <a-select-option
              v-for="item in equipList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </span>
        <!-- 气囊 -->
        <span slot="potId" slot-scope="text, record">
          <a-select
            v-model="record.potId"
            style="width: 120px"
            placeholder="请选择设备"
          >
            <a-select-option
              v-for="item in potList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </span>
        <!-- 参数值 -->
        <span slot="type" slot-scope="text, record">
          <a-select v-model="record.type" style="width: 120px">
            <a-select-option
              v-for="item in parameterList"
              :key="item.id"
              :value="item.id"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </span>
        <!-- 参数一 -->
        <span slot="param2" slot-scope="text, record">
          <a-input v-model="record.param2"/>
        </span>
        <!-- 参数二 -->
        <span slot="param3" slot-scope="text, record">
          <a-input v-model="record.param3"/>
        </span>
        <!-- 参数三 -->
        <span slot="param4" slot-scope="text, record">
          <a-input v-model="record.param4"/>
        </span>
        <template slot="operation" slot-scope="text, record">
          <a-button type="primary" @click="submit">提交</a-button>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    equipList: {},
  },
  data() {
    return {
      potId:null,//气囊
      potList: [], //气囊下拉框
      form: {},
      columns: [
        // {
        //   dataIndex: "name",
        //   key: "name",
        //   slots: { title: "customTitle" },
        //   scopedSlots: { customRender: "name" },
        // },
        {
          title: "设备",
          dataIndex: "equipId",
          key: "equipId",
          scopedSlots: { customRender: "equipId" },
        },
        {
          title: "气囊",
          dataIndex: "potId",
          key: "potId",
          scopedSlots: { customRender: "potId" },
        },
        {
          title: "参数值",
          key: "type",
          dataIndex: "type",
          scopedSlots: { customRender: "type" },
        },
        {
          title: "参数一",
          key: "param2",
          dataIndex: "param2",
          scopedSlots: { customRender: "param2" },
        },
        {
          title: "参数二",
          key: "param3",
          dataIndex: "param3",
          scopedSlots: { customRender: "param3" },
        },
        {
          title: "参数三",
          key: "param4",
          dataIndex: "param4",
          scopedSlots: { customRender: "param4" },
        },
        {
          title: "操作",
          align: "center",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      data: [
        {
          equipId: "",
          potId: "",
          type: 1,
          param1: "",
          param2: "",
          param3: "",
        },
      ],
      parameterList: [
        {
          id: 1,
          label: "充气",
        },
        {
          id: 2,
          label: "放气",
        },
      ],
      timer:null,
    };
  },
  created() {
    this.data[0].equipId = this.equipList[0].id;
    this.getPotList(); //获取气囊的下拉
  },
  mounted() {
    this.timer=setInterval(()=>{
      if (this.data[0].equipId) {
        this.getPotList();
      }
    },10000)
  },
  beforeDestroy(){
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer=null;
  },
  methods: {
    submit(){
      let data=this.data[0];
      this.$axios.post("/modbus/equip/operation",data).then(res=>{
        if (res.code==200) {
          this.$message.success("提交成功");
        }
      })
    },
    getPotList() {
      this.$axios
        .get("/modbus/equip/pots", {
          params: {
            equipId: this.data[0].equipId,
          },
        })
        .then((res) => {
          this.data[0].potId=res.data[0].id;
          this.potList=res.data;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#SoundEqTran {
  // display: flex;
  // justify-content: space-around;
  .SoundEq1 {
    width: 970px;
    height: 740px;
    margin: 10px auto;
    position: relative;
    background-image: url("~@/assets/img/SoundEq1.png");
    background-size: contain;
    /* 背景图缩放以完整显示 */
    background-repeat: no-repeat;
    /* 防止背景图重复 */
    background-position: center;

    /* 将背景图居中显示 */
    .SoundEq1Title {
      position: absolute;
      left: 46%;
      font-size: 22px;
      color: white;
      font-family: "KaiTi", "楷体", serif;
    }
  }
}
</style>
<style lang="scss">
#SoundEqTran {
  .ant-input {
    color: white;
  }
  .ant-table-wrapper {
    width: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }

  .ant-table-thead {
    th {
      background: #0e344e !important;
      color: white !important;
    }
  }

  .ant-table-body,
  .ant-table-placeholder {
    min-height: 680px;
    /* 设置表格的最小高度 */
    background: #0e344e !important;
    overflow-y: auto !important;
  }

  .ant-table-placeholder {
    height: 300px !important;
    min-height: 300px !important;
    border-bottom: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8%;
  }
}
</style>